<!--
 * @Descripttion: 地图新建组件
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-18 16:51:22
 * @LastEditors: daipeng
 * @LastEditTime: 2020-09-23 18:40:35
-->
<template>
	<div>
		<div class="wrap_search">
			<el-input v-model="input" placeholder="请输入内容" class="input-with-select"></el-input>
			<el-input v-model="lng" placeholder="经度" disabled class="input-with-degree"></el-input>
			<el-input v-model="lat" placeholder="纬度" disabled class="input-with-degree"></el-input>
			<input type="button" class="btn" value="搜索" @click="search()" />
			<input type="button" class="btn" value="确定" @click="close()" />
		</div>

		<div id="container"></div>
		<!-- <div id="panel"></div> -->
	</div>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			area: '',
			lng: '', //经度
			lat: '', //纬度
			input: '',
			placeSearch: ''
		}
	},
	props: {
		inputs: String,
		lngs: String || Number,
		lats: String || Number,
		areas: String
	},
	mounted() {
		this.lng = this.lngs
		this.lat = this.lats
		// this.input = this.areas
		this.input = ''
		this.area = this.areas

		var that = this

		var map = new AMap.Map('container', {
			resizeEnable: true
		})
		var marker
		//显示比例尺
		var scale = new AMap.Scale({
			visible: true
		})
		map.addControl(scale)
		AMap.service(['AMap.PlaceSearch'], function () {
			//构造地点查询类
			that.placeSearch = new AMap.PlaceSearch({
				pageSize: 50,
				// 单页显示结果条数
				pageIndex: 1,
				// 页码
				city: '010',
				// 兴趣点城市
				citylimit: false,
				//是否强制限制在设置的城市内搜索
				map: map,
				// 展现结果的地图实例
				// panel: 'panel',
				// 结果列表将在此容器中进行展示。
				autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
			})
			//关键字查询
			// that.placeSearch.search(that.areas)
			//点击panel列表的点标记
			// AMap.event.addListener(that.placeSearch, 'listElementClick', function (e) {
			// 	that.lng = e.data.location.lng
			// 	that.lat = e.data.location.lat
			// 	that.area = e.data.address
			// })

			//点击地图上的点标记
			AMap.event.addListener(that.placeSearch, 'markerClick', function (e) {
				console.log(e.data.location.lng + ',' + e.data.location.lat)
				console.log(e.data.address) //获取当前marker的具体地址信息
				// that.lng = e.data.location.lng
				// that.lat = e.data.location.lat
				// that.area = e.data.address
				that.lng = e.data.location.lng
				that.lat = e.data.location.lat
			})
		})

		//设置鼠标的样式
		map.setDefaultCursor('crosshair')
		//为地图注册click事件获取鼠标点击出的经纬度坐标
		if (this.lng && this.lat) {
			marker = new AMap.Marker({
				icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
				position: [this.lng, this.lat]
			})
			map.clearMap()
			map.add(marker)
			map.setFitView()
		}

		map.on('click', function (e) {
			that.lng = e.lnglat.getLng()
			that.lat = e.lnglat.getLat()
			marker = new AMap.Marker({
				icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
				position: [e.lnglat.getLng(), e.lnglat.getLat()]
			})
			map.clearMap()
			map.add(marker)
			map.setFitView()
		})
	},
	methods: {
		search() {
			this.placeSearch.search(this.input)
		},
		close() {
			this.$emit('pagedata', [this.lng, this.lat, this.area])
		}
	}
}
</script>

<style scoped>
@import '../../assets/css/areapicking.css';
#container {
	width: 100%;
	height: 500px;
}

#panel {
	position: absolute;
	background-color: white;
	max-height: 500px;
	overflow-y: auto;
	top: 124px;
	right: 5px;
	width: 280px;
}

.wrap_search {
	margin-bottom: 5px;
}

.input-with-select {
	width: 200px !important;
	float: left;
}

.input-with-degree {
	width: 100px !important;
	float: left;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Areapickings.vue